<template>
  <mid-dialog-box :title="'设置'" @closeMidDialog="closeMidDialog">
    <div class="settingbox height_100">
      <div class="setting height_100">
        <ul class="setside height_100">
          <li
            v-for="item in sidelist"
            :class="currentside === item.flag ? 'currentItem' : ''"
            :key="item.flag"
            @click="changeSide(item.flag)"
          >
            <img
              :src="
                require('@/assets/cfRoom/images/' +
                  (currentside === item.flag
                    ? 'cur' + item.flag
                    : item.flag + 'set') +
                  '.png')
              "
              alt=""
            />
            <span>{{ item.name }}</span>
          </li>
        </ul>
        <div class="sidecontent height_100">
          <div v-if="currentside === 'normal'" class="normalset">
            <el-checkbox label="锁定会议" v-model="cf_isLocked"></el-checkbox>
<!--            <el-checkbox label="成员入会时静音"></el-checkbox>-->
<!--            <el-checkbox label="允许成员自我解除静音"></el-checkbox>-->
<!--            <el-checkbox label="允许成员上传文档"></el-checkbox>-->
            <el-checkbox label="显示参会时长" v-model="durationOfAttendance"></el-checkbox>
<!--            <el-checkbox class="password" label="开启入会密码" v-model="cfNeedPassword"></el-checkbox>-->
<!--            <el-input v-model="cf_password" @blur="checkPassword" v-if="cfNeedPassword"></el-input>-->
          </div>
          <div v-if="currentside === 'audio'" class="audioset">
            <ul>
              <li>
                <span>麦克风</span>
                <el-select v-model="audioInputId" placeholder="请选择">
                  <el-option
                    v-for="item in audioInputList"
                    :key="item.deviceId"
                    :label="item.label"
                    :value="item.deviceId"
                  >
                  </el-option>
                </el-select>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </mid-dialog-box>
</template>

<script>
import { sendSock } from '@/utils/socketSend'
import { mapState } from 'vuex'

export default {
  data () {
    return {
      sidelist: [
        { name: '常规设置', flag: 'normal' },
        { name: '音频', flag: 'audio' }
      ],
      currentside: 'normal'
    }
  },
  computed: {
    // 当前会议相关设置
    ...mapState('conferenceRoom', ['cf_id', 'audioInputList', 'audioInputId']),
    // 是否锁定会议
    cf_isLocked: {
      get () {
        return this.$store.state.conferenceRoom.cf_isLocked
      },
      set (val) {
        this.$store.commit('conferenceRoom/set_cf_isLocked', val)
        sendSock({
          type: '4.1.24',
          body: {
            cf_id: this.cf_id,
            cf_operation: val
          }
        })
      }
    },
    // 当前会议是否显示参会时长
    durationOfAttendance: {
      get () {
        return this.$store.state.conferenceRoom.conferenceSettings.durationOfAttendance
      },
      set (val) {
        this.$store.commit('conferenceRoom/set_conferenceSettings_durationOfAttendance', val)
      }
    },
    // 当前会议密码
    cf_password: {
      get () {
        return this.$store.state.conferenceRoom.cf_password
      },
      set (val) {
        if (val.length === 6) {
          this.$store.dispatch('conferenceRoom/updateCfPwd', {
            cfNeedPassword: true,
            cfPassword: val
          })
        }
        this.$store.commit('conferenceRoom/set_cf_password', val)
      }
    },
    // 是否开启会议密码
    cfNeedPassword: {
      get () {
        return this.$store.state.conferenceRoom.cf_need_password
      },
      set (val) {
        if (!val) {
          this.$store.dispatch('conferenceRoom/updateCfPwd', {
            cfNeedPassword: val,
            cfPassword: ''
          })
        } else {
          if (this.cf_password && this.cf_password.length === 6) {
            this.$store.dispatch('conferenceRoom/updateCfPwd', {
              cfNeedPassword: val,
              cfPassword: this.cf_password
            })
          }
        }
        this.$store.commit('conferenceRoom/set_cf_need_password', val)
      }
    },
    // 当前音频输入设备
    audioInputId: {
      get () {
        return this.$store.state.conferenceRoom.audioInputId
      },
      set (val) {
        this.tools.webRTC.changeAudio(val)
        this.$store.commit('conferenceRoom/set_deviceId', {
          type: 'audio',
          id: val
        })
      }
    }
  },
  methods: {
    // 切换选中
    changeSide (flag) {
      this.currentside = flag
    },
    // 关闭弹窗
    closeMidDialog () {
      this.checkPassword()
      this.$emit('closeSetting')
    },
    // 校验密码
    checkPassword () {
      if (this.cfNeedPassword && (!this.cf_password || this.cf_password.length !== 6)) {
        this.$store.commit('conferenceRoom/set_cf_need_password', false)
        this.$store.commit('conferenceRoom/set_cf_password', '')
        this.$message({
          type: 'warning',
          message: '请输入六位有效密码'
        })
      }
    },
    // 获取当前音视频输入设备ID
    getDevicesId () {
      this.tools.webRTC.getDevicesId()
    },
    // 获取音频输入设备列表
    getAudioInputList () {
      this.tools.webRTC.getDevice('audioinput')
    }
  },
  created () {
    this.getDevicesId()
    this.getAudioInputList()
  }
}
</script>

<style lang="scss" scoped>
.settingbox {
  // background-color: pink;
  .setting {
    .setside {
      padding-top: 16px;
      border-right: 1px solid #ebedf3;
      float: left;
      width: 178px;
      height: 100%;

      li {
        cursor: pointer;
        height: 40px;
        display: flex;
        align-items: center;
        padding-left: 35px;

        img {
          width: 20px;
          height: 20px;
          margin-right: 12px;
        }

        span {
          font-size: 12px;
          color: #2e3f64;
        }
      }

      .currentItem {
        background: linear-gradient(316deg, #4a53ef 0%, #6971fe 100%);

        span {
          color: #fff;
        }
      }
    }

    .sidecontent {
      padding-top: 16px;
      width: 582px;
      float: right;
      // background-color: skyblue;
      padding-left: 32px;

      ::v-deep .el-checkbox {
        display: block;
        height: 22px;
        line-height: 22px;
        color: #0D172C;
      }

      ::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
        color: #0D172C;
      }

      .normalset {
        ::v-deep .el-checkbox {
          margin-bottom: 24px;
        }

        ::v-deep .el-checkbox.password {
          margin-bottom: 15px;
        }

        ::v-deep .el-input__inner {
          width: 400px;
          background: #f6f7fb;
          border: 1px solid #d8dee9;
          border-radius: 3px;
        }
      }

      .audioset {
        ul {
          li {
            position: relative;
            margin-bottom: 24px;

            span {
              margin-right: 27px;
              display: inline-block;
              width: 50px;
              font-size: 14px;
              height: 22px;
              line-height: 22px;
              color: #2E3F64;
            }

            ::v-deep .el-slider {
              width: 400px;
              display: inline-block;
              vertical-align: middle;
            }

            .audioTip {
              position: absolute;
              width: auto;
              right: 25px;
              top: 50%;
              transform: translateY(-50%);
              margin: 0;
            }
          }
        }
      }

      ::v-deep .el-input__inner {
        font-size: 14px;
        line-height: 42px;
        height: 42px;
        color: #0D172C;
        font-weight: 500;
      }

      ::v-deep .el-select {
        width: 400px;
      }
    }
  }
}
</style>
